<template>
<view class="">
	<uni-forms ref="from" :modelValue="formData" label-width="85px" border label-align="right" :rules="rules" validateTrigger="blur">
		<uni-forms-item required label="产品类型" name="type">
			<uni-data-select
			  v-model="formData.type"
			  :localdata="typeData"
			  @change="changeType"
			></uni-data-select>
		</uni-forms-item>
		<uni-forms-item required label="所属银行" name="bank">
			<uni-data-select
			  v-model="formData.bank"
			  :localdata="bankData"
			  @change="changeBank"
			></uni-data-select>
		</uni-forms-item>
		<uni-forms-item required label="热门产品" name="hot">
			<uni-data-checkbox v-model="formData.hot" :localdata="hotData"></uni-data-checkbox>
		</uni-forms-item>
		<uni-forms-item required label="产品标题" name="name">
			<uni-easyinput type="text" v-model="formData.name" placeholder="请输入产品名称" />
		</uni-forms-item>
		<uni-forms-item required label="产品简介" name="brief">
			<uni-easyinput type="text" v-model="formData.brief" placeholder="请输入产品简介" />
		</uni-forms-item>
		<uni-forms-item required name="detail" label="产品详情">
		  <sp-editor
			placeholder="请输入产品详情"
			:toolbar-config="{
			  keys:['header','bold', 'listOrdered', 'indentInc', 'indentDec' ],
			  iconSize: '18px',
			}"
			@init="initEditor"
			@input="inputOver"
		  ></sp-editor>
		</uni-forms-item>
	</uni-forms>
	
	<view class="" style="position: fixed; bottom: 0; width: 100%;">
		<button type="primary" @click="submitForm">上传</button>
	</view>
</view>
</template>

<script setup>
import { ref } from 'vue';
const zf_bankProduct = uniCloud.importObject('zf_bankProduct') 
const formData = ref({
	type: '',
	bank: '',
	hot: '',
	name: '',
	brief: '',
	html: ''
})

let editorIns  = ref()

const initEditor = (editor)=>{
	editorIns.value = editor
	// editorIns.value.setContents({
	// 	html:''
	// })
}

const inputOver = (e)=>{
	formData.value.html = e.html
}

let from = ref()

const rules = {
	type: {
		rules:[
			{
				required: true,
				errorMessage: '请选择产品类型',
			}
		]
	},
	bank: {
		rules:[
			{
				required: true,
				errorMessage: '请选择产品所属银行',
			}
		]
	},
	hot: {
		rules:[
			{
				required: true,
				errorMessage: '请选择产品是否热门',
			}
		]
	},
	name: {
		rules:[
			{
				required: true,
				errorMessage: '请输入产品名称',
			}
		]
	},
	brief: {
		rules:[
			{
				required: true,
				errorMessage: '请输入产品简介',
			}
		]
	},
}

const typeData =  [
	{ value: 0, text: "公积金贷" },
	{ value: 1, text: "按揭房贷" },
	{ value: 2, text: "商户贷" },
	{ value: 3, text: "工薪贷" },
	{ value: 4, text: "保单贷" },
	{ value: 5, text: "大额分期卡" },
	{ value: 6, text: "学历贷" },
	{ value: 7, text: "农户贷" },
	{ value: 8, text: "烟草贷" }
]

const bankData = [
	{ value: 0, text: "工商银行" },
	{ value: 1, text: "农业银行" },
	{ value: 2, text: "中国银行" },
	{ value: 3, text: "建设银行" },
	{ value: 4, text: "邮储银行" },
	{ value: 5, text: "交通银行" },
	{ value: 6, text: "中信银行" },
	{ value: 7, text: "农商银行" },
	{ value: 8, text: "招商银行" },
	{ value: 9, text: "中邮消费金融" },
	{ value: 10, text: "新网银行" },
	{ value: 11, text: "其他银行" },
]

const hotData = [
	{ value: 0, text: "非热门" },
	{ value: 1, text: "热门" }
]


// 改变产品类型
const changeType = ()=>{
	console.log(formData.value);
}

// 改变产品银行
const changeBank = ()=>{
	console.log(formData.value);
}

// 提交按钮
const submitForm = ()=>{
	from.value.validate().then(res=>{
		console.log(res);
		uni.showModal({
			title: '确认提交吗',
			success: function (res) {
				if (res.confirm) {
					uploadProduct()
				}
			}
		})
	}).catch(err=>{
		console.log(err);
	})
}

// 上传产品
const uploadProduct = async()=>{
	let data = JSON.parse(JSON.stringify(formData.value))
	data.type = typeData[data.type].text
	data.bank = bankData[data.bank].text
	console.log(data);
	const res = await zf_bankProduct.addProduct(data)
	console.log(res);
	if(res.id){
		uni.showToast({
			title: "上传成功",
			icon: "none"
		})
		setTimeout(()=>{
			uni.switchTab({
				url: "/pages/index/index"
			})
		},800)
	}else{
		uni.showToast({
			title: "上传失败，请联系管理员",
			icon: "none"
		})
	}
}

</script>

<style lang="scss" scoped>
::v-deep .uni-input-wrapper{
	height: 70rpx;
}
::v-deep .uni-input-placeholder{
	font-size: 25rpx;
	line-height: 40rpx;
	height: 40rpx;
}
</style>
